<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-page-header__content {
            color: white;
            font-weight: bold;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--左上角返回上一页-->
    <el-page-header style="background-color: #3f3f3f ; color: white;
    line-height: 60px;" @back="goBack" content="修改教师信息">
    </el-page-header>
    <el-card style="width: 600px;height: 1050px;margin: 0 auto;border: 1px solid black"><!--卡片-->
        <el-form label-width="80px"> <!--Element组件中的表单-->
            <el-form-item label="姓名:">
                <el-input type="text" v-model="t.name"></el-input>
            </el-form-item>
            <el-form-item label="性别:">
                <template>
                    <el-radio v-model="t.gender" label=男></el-radio>
                    <el-radio v-model="t.gender" label=女></el-radio>
                </template>
            </el-form-item>
            <el-form-item label="年龄:">
                <el-input type="text" v-model="t.age"></el-input>
            </el-form-item>
            <el-form-item label="地址:">
                <el-input type="text" v-model="t.address"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:">
                <el-input type="text" v-model="t.number"></el-input>
            </el-form-item>
            <el-form-item label="教龄:">
                <el-input type="text" v-model="t.seniority"></el-input>
                <el-dropdown @command="handleCommandSeniority">
  <span class="el-dropdown-link">
    选择时间<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="2年以内">2年以内</el-dropdown-item>
                        <el-dropdown-item command="3-5年">3-5年</el-dropdown-item>
                        <el-dropdown-item command="6-9年">6-9年</el-dropdown-item>
                        <el-dropdown-item command="10-15年">10-15年</el-dropdown-item>
                        <el-dropdown-item command="15年-20年">15年-20年</el-dropdown-item>
                        <el-dropdown-item command="20年以上">20年以上</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form-item>
            <el-form-item label="教学科目:">
                <el-input type="text" v-model="t.courseName"></el-input>
            </el-form-item>
            <el-form-item label="教学班级:">
                <el-input type="text" v-model="t.grade"></el-input>
            </el-form-item>
            <el-form-item label="教师级别:">
                <el-input type="text" v-model="t.level">{{t.level}}</el-input>
                <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    选择级别<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="三级教师">三级教师</el-dropdown-item>
                        <el-dropdown-item command="二级教师">二级教师</el-dropdown-item>
                        <el-dropdown-item command="一级教师">一级教师</el-dropdown-item>
                        <el-dropdown-item command="高级教师">高级教师</el-dropdown-item>
                        <el-dropdown-item command="正高级教师">正高级教师</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form-item>
            <el-form-item label="入职时间:">
                <el-date-picker
                        v-model="t.created"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="证件照片:">
                <img :src="oldUrl" width="100px" height="100px" v-if="isShow" alt=""><!--修改前的图片,控制显示isShow-->
                <!--当上传成功后调用handleSuccess这个方法-->
                <el-upload
                        action="/upload"
                        name="pic"
                        limit="1"
                        list-type="picture-card"
                        :on-success="handleSuccess"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button style="margin: 0 0 0 20px"
                           type="primary" @click="update()">执行修改
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<!--inport Axios Framework-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                isShow:true,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                dialogImageUrl: '',
                dialogVisible: false,
                t: {
                    name: '',
                    age: '',
                    address: '',
                    number: '',
                    seniority: '',
                    courseName: '',
                    grade: '',
                    created: '',
                    level: '',
                    jobId: '',
                    url: '',
                    gender:''
                },
                oldUrl:'',
            }
        },
        methods: {
            update() {
                //发送修改教师的请求
                axios.post("/teacher/updateByJobId", v.t).then(function (response) {
                    //跳转到管理页面
                    location.href = "/admin.html";
                })
            },
            handleSuccess(response, file, fileList) {//图片上传成功后接收图片的url
                //response代表服务器响应的图片路径
                v.t.url = response
                v.isShow = false;
            },
            goBack() {
                history.back();//返回上一页面
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                //发出删除图片的请求
                axios.get("/remove?url=" + v.t.url).then(function () {
                    v.$message("服务器图片删除完成");
                    v.t.url = '';
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleCommand(command){
                v.$message(command);
                v.t.level = command;
            },
            handleCommandSeniority(command){
                v.t.seniority = command;
            },
        },
        mounted: function () {
            axios.get("/teacher/selectByJobId"+location.search).then(function (response) {
                v.t = response.data;
                v.oldUrl = v.t.url;
            })
        }
    })
</script>
</html>